<template>
	<view style="height: 100%;">
		<view class="bg-container">
			<view class="logo-container">
				<image src="/static/logo.png" mode="" class="logo-image"></image>
				<view class="logo-text">
					<text style="font-size: 38rpx;font-weight: bold;">闪酿APP</text><br />
					<text>闪酿因你而闪亮~</text>
				</view>
			</view>
			<image src="/static/download/liulanqi@2x.png" mode="" class="weixin-image" v-show="isWeiXinLogin||isAlipayLogin"></image>
			
		</view>
		<view class="model-container">
			<image src="/static/download/iphone.png" mode="" class="iphone-image"></image>
			<view class="btn-container">
				<!-- <button type="default" class="btn-download" @click="androidDownload">Android 下载</button>
				<button type="default" class="btn-download" @click="toAppstore">Ios 下载</button> -->
				<u-button @click="androidDownload" hover-class="none" class="u-flex-1 u-m-r-30" shape="circle" :hair-line="false" :custom-style="{'background':'#ffbb1a','border':'none'}">Android 下载</u-button>
				<u-button @click="toAppstore" hover-class="none" class="u-flex-1" shape="circle" :hair-line="false" :custom-style="{'background':'#ffbb1a','border':'none'}">IOS 下载</u-button>
			</view>
		</view>
		<akLoading isFullScreen :active="loading"></akLoading>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				apkUrl:null,
			}
		},
			
		computed:{
			isWeiXinLogin() {
			    var ua = window.navigator.userAgent.toLowerCase();
				console.log(ua);
			    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			        return true; // 微信中打开
			    } else {
			        return false; // 普通浏览器中打开
			    }
			},
			isAlipayLogin(){
				if (/AlipayClient/.test(window.navigator.userAgent)) {
					//判断是否是支付宝浏览器打开
					return true; // 支付宝打开
				}else{
					return false; // 普通浏览器中打开
				}
			}
		},
		created() {
			this.getApkPackageFn();
		},
		methods: {
			async getApkPackageFn(){
				this.loading = true;
				let params = {
					isWgt:false,
					appPlatform:2,
				}
				const res = await this.$newHttp.get('api/AppPackage/GetAppPackage',{params:params});
				this.loading = false;
				console.log(res);
				if(res.code === 200){
					this.apkUrl = res.data.url;
				}else{
					this.$u.toast('获取安卓APK包失败');
				}
			},
			async androidDownload(){
				// uni.showLoading({
				// 	title:'正在加载。。。'
				// })
				// const res =await this.$http.get('api/AppPackage/DownloadNewEdition');
				// uni.hideLoading()
				if(this.isWeiXinLogin||this.isAlipayLogin){
					uni.showModal({
						content:'请在默认浏览器中打开'
					})
				}else{
					// location.href='https://api.shan-niang.com/api/AppPackage/DownloadNewEdition'
					if(this.apkUrl){
						location.href=this.apkUrl;
					}else{
						this.$u.toast('获取安卓APK包失败');
					}
				}
			},
			toAppstore(){
				// https://apps.apple.com/cn/app/%E9%97%AA%E9%85%BF/id1621645290
				location.href='https://apps.apple.com/cn/app/%E9%97%AA%E9%85%BF/id1621645290'
			}
		}
	}
</script>

<style lang="scss" scoped>
.bg-container{
	width: 100%;
	// height: 666rpx;
	height: 45%;
	position: relative;
	background: url('/static/download/bg01@2x.png')  no-repeat;
	background-size: 100% 100%;
	.logo-container{
		width: 400rpx;
		height: 173rpx;
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		top: 50%;
		left: 50%;
		margin-top: -87rpx;
		margin-left: -200rpx;
		.logo-image{
			width: 140rpx;
			height: 140rpx;
		}
	}
	.weixin-image{
		width: 354rpx;
		height: 132rpx;
		position: absolute;
		top: 0;
		right: 50rpx;
	}
	
}
.model-container{	
		width: 100%;
		height: 55%;
		position: relative;
		.iphone-image{
			position: absolute;
			width: 645rpx;
			height: 120%;
			top: -20%;
			left: 50%;
			margin-left: -270rpx;
		}
		.btn-container{
			position: absolute;
			width: 640rpx;
			display: flex;
			justify-content: space-between;
			bottom: 100rpx;
			left: 50%;
			margin-left: -320rpx;
			.btn-download{
				// width: 290rpx;
				// height: 86rpx;
				// background: #FFBB1A;
				// box-shadow: 0px 10px 18px 2px rgba(57, 57, 57, 0.1);
				// border-radius: 43rpx;
			}
		}
	}
	
	

</style>
